<template>
    <div class='h-main'>
        props：
        <div>
            <Row v-for='(pv,pk) in value' :key='key +"_" + pk' :gutter="8" >
                <Col span='6'>
                    {{pk}}
                </Col>
                <Col span='10'>
                    <Input v-model="value[pk]" />
                </Col>
                <Col span='8'>
                    <Button @click="$delete(value,pk)">删除</Button>
                    <Button >修改</Button>
                </Col>
            </Row>
            <Row v-if='value' :gutter="8">
                <Col span='6'>
                    <Select v-model="tkey" >
                        <Option v-for='(ov,ok) in options' :value="ok" :key='ok'>{{ok}} : {{ov.desc}}</Option>
                    </Select>
                </Col>
                <Col span='10'>
                    <Input v-model="tval" />
                </Col>
                <Col span='8'>
                    <Button @click="addTKV">添加</Button>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        value:{
            required:true,
            type:Object,
        },
        options:{
            required:true,
            type:Object,
            default:()=>{return {'key':'key'}},
        }
    },
    data(){
        return {
            tempOpts:[],
            tkey:'key',
            tval:'val',
        }
    },
    mounted(){
        //tempOpts.push('')
    },
    methods:{
        addTKV(){
            this.$set(this.value,this.tkey,this.tval);
            this.tkey = 'key';
            this.tval = 'val';
        }
    }
}
</script>
<style lang="less" scoped>
    .h-main {
        color: #000;
        >div{
            padding: 5px;
            border: 1px solid #aee;
            border-radius: 3px;
            >div {
                margin: 2px;
            }
        }
    }
</style>

